<template>
  <div>
    <div class="search-h">
      <div>
        <a-form layout="inline" :form="queryParams">
          <a-form-item label="标题">
            <a-input
              v-model="queryParams.title"
              placeholder="输入标题"
            ></a-input>
          </a-form-item>
        </a-form>
      </div>
      <div>
        <a-button type="danger" @click="query"> 查询 </a-button>
        <a-button @click="reset"> 重置 </a-button>
      </div>
    </div>
    <div class="btn-group">
      <a-button @click="add"> 新增 </a-button>
      <a-button @click="del"> 删除 </a-button>
      <a-button> 重置 </a-button>
    </div>
    <a-table
      bordered
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :columns="columns"
      :data-source="data"
      :pagination="pageParams"
      @change="tableChange"
    >
      <template slot="status" slot-scope="rows, record">
        {{ record.status ? '已推送' : '未推送' }}
      </template>
      <template slot="operation" slot-scope="rows, record">
        <a-icon
          class="edit"
          :class="record.status ? 'disabled' : ''"
          type="setting"
          theme="filled"
          @click="edit(record)"
        />
        <a-icon type="delete" theme="filled" @click="del(record)" />
      </template>
    </a-table>

    <!-- 新增-编辑 -->
    <a-modal
      v-model="visible"
      :title="title"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        layout="horizontal"
        :model="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-model-item label="标题">
          <a-input v-model="form.title" placeholder="请输入标题" />
        </a-form-model-item>
        <a-form-model-item label="说明">
          <a-textarea
            v-model="form.explain"
            placeholder="请输入说明内容"
            :rows="4"
          />
        </a-form-model-item>
        <a-form-model-item label="关联事项">
          <a-select v-model="form.relatedMatters" placeholder="请选择关联事项" >
            <a-select-option
              :key="item.id"
              :value="item.value"
              v-for="item in relatedMattersList"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="推送时间">
          <a-date-picker
            format="YYYY-MM-DD HH:mm:ss"
            show-time
            placeholder="请选择时间"
            :defaultValue="getDateDefault(form.pushTime)"
            @change="onChange"
            @ok="onOk"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'
const columns = [
  {
    title: '标题',
    dataIndex: 'title'
  },
  {
    title: '说明',
    dataIndex: 'explain'
  },
  {
    title: '关联事项',
    dataIndex: 'relatedMatters'
  },
  {
    title: '推送时间',
    dataIndex: 'pushTime'
  },
  {
    title: '状态',
    key: 'status',
    scopedSlots: { customRender: 'status' },
    dataIndex: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createdTime'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime'
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' },
    dataIndex: 'operation'
  }
]

export default {
  data () {
    return {
      moment,
      relatedMattersList: [
        {
          value: 'test',
          label: '回显名称',
          id: 0
        },
        {
          value: 'test1',
          label: '回显名称1',
          id: 1
        }
      ],
      visible: false,
      title: '新增',
      queryParams: {
        title: ''
      },
      pageParams: {
        current: 1,
        pageSize: 10,
        total: 0,
        'show-size-changer': true
      },
      form: {
        status: false,
        introduce: '',
        address: '',
        phone: '',
        name: '',
        pushTime: ''
      },
      data: [],
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getDateDefault (time) {
      return time ? moment(time, 'YYYY-MM-DD HH:mm:ss') : moment()
    },
    tableChange (page) {
      this.pageParams.pageSize = page.pageSize
      this.pageParams.current = page.current
      this.getList()
    },
    query () {
      this.getList()
    },
    reset () {
      this.queryParams = this.$options.data().queryParams
      this.getList()
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    // 增删改查
    add () {
      this.visible = true
      this.title = '新增'
    },
    edit (record) {
      if (record.status) return // 已推送
      this.visible = true
      this.title = '编辑'
      this.form = record
    },
    del (record) {
      let list = record.id ? [record.id] : this.selectedRowKeys

      this.$confirm({
        title: '提示',
        content: '确定删除操作数据?',
        onOk () {
          // TODO:
          console.log('🚀 ~ file: index.vue ~ line 136 ~ del ~ list', list)
        }
      })
    },
    onChange (value) {
      // this.form.pushTime = value._a
    },
    onOk (value) {
      this.form.pushTime = value._a
    },
    handleOk () {
      // TODO:
    },
    handleCancel () {
      this.form = this.$options.data().form
    },
    // 接口
    getList () {
      // TODO:
      let params = {
        current: this.pageParams.current,
        pageSize: this.pageParams.pageSize,
        ...this.queryParams
      }

      const data = []
      for (let i = 0; i < 46; i++) {
        data.push({
          key: i,
          name: `Edward King ${i}`,
          phone: 32,
          status: false,
          createdTime: 'createdTime',
          updateTime: 'updateTime',
          operation: 'operation',
          pushTime: '2022-08-20 15:36:16'
        })
      }
      this.data = data
      this.pageParams.total = data.length
    }
  }
}
</script>
<style lang="less" scoped>
.search-h {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 8px;
  /deep/ .ant-form-item {
    margin-bottom: 0px !important;
  }
}

.edit {
  color: #1890ff;
}
.disabled {
  cursor: not-allowed;
  color: #ddd;
}
.btn-group {
  margin-bottom: 12px;
}
</style>
